<template>
    <div class="valueContainer">
        <h1 class="headline">WHAT WE VALUE</h1>
        <div class="gifs">
            <div v-for="item in topGifs" :key="item.id" class="gif">
                <div class="topGif">
                    <img :src="item.pic" alt="">
                </div>
                <div class="bottomValues">
                    <h3>{{ item.title }}</h3>
                    <p>{{ item.description }}</p>
                </div>
            </div>
        </div>
        <div class="values">
            <h3>Independence & Responsibility</h3>
            <p>Independent cells are the most unique aspect of Supercell culture. Teams operate independently in service
                of our players and our games. With independence comes the responsibility to do what's best for our
                players and Supercell long term. Without responsibility, we cannot have independence, and without
                independence, we cannot have Supercell.</p>
            <p>At Supercell, you own results - both successes and failures. You are a proactive doer which means that
                you take the initiative to get things done and solve problems without a boss telling you what or how to
                do it.</p>
            <p>Independence and responsibility result in faster execution and a work environment which empowers you to
                do the best work of your career.</p>
            <h3>Ambition & Risk-taking</h3>
            <p>We are here to make and operate great, important games while doing industry-defining things for our
                players. Since this is hard and risky, we know to expect failure. Our environment must make failure feel
                safe. It's the only way we, as individuals and teams, can achieve great things.</p>
            <p>Our industry forces us to be constantly in touch with risk, uncertainty, and change. We'll feel
                uncomfortable, but by openly sharing learnings from failure and celebrating failure in a safe
                environment we can build resilient teams that inspire each other to dream and dare.</p>
            <p>At Supercell, we kill our darlings, take bold swings and push the limits of what's possible.</p>
            <h3>Humility & Kindness</h3>
            <p>No matter how successful we are, we stay humble and acknowledge the role that our teammates and luck have
                played in our success. Humility is also the willingness to learn from others to improve and become
                better. We aim to stay curious, admit what we don't know, and receive constructive direct feedback
                openly. Rather than pretending ego doesn't exist, we strive to set ego aside and focus on fostering an
                environment where learning and collaboration come first.</p>
            <p>Kindness is the foundation of strong relationships, trust, understanding, and emotional safety. It's
                everyone's job to extend respect and empathy to the people around us-our players, Supercellians, and our
                partners-regardless of position and background. Kindness also means giving clear and constructive
                feedback, which helps all of us become better.</p>
            <p>Working with humble and kind people simply feels good. In a safe and supportive environment, we can work
                together better and faster</p>

        </div>
    </div>
</template>

<script setup>
import {reactive} from "vue";

const topGifs = reactive([
    {
        id: '001',
        title: 'Independence & Responsibility',
        description: 'The Best Teams Make the Best Games',
        pic: '/src/assets/img/careers/whyYou/gif01.webp'
    }, {
        id: '002',
        title: 'Ambition & Risk-taking',
        description: 'Shoot for the Moon',
        pic: '/src/assets/img/careers/whyYou/gif02.webp'
    }, {
        id: '003',
        title: 'Humility & Kindness',
        description: 'Clear is Kind',
        pic: '/src/assets/img/careers/whyYou/gif03.webp'
    }
])
</script>

<style scoped>
.valueContainer {
    background-color: #f3f3f3;
    padding: 50px 3%;
}

.headline {
    text-align: center;
    font-size: 44px;
    font-weight: 800;
    margin-bottom: 50px;
}

.gifs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.gif {
    width: 32%;
}

.gif img {
    width: 60%;
    margin: 0 auto;
    display: block;
}

.bottomValues {
    background-color: #fff;
    text-align: center;
    padding: 20px;
    height: 160px;
    box-shadow: 10px 10px 20px -6px rgb(0, 0, 0, 0.2);
}

.bottomValues h3 {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 800;
}

.bottomValues p {
    font-size: 18px;
    margin-top: 16px;
}

.values {
    margin: 50px auto;
    width: 50%;
}

.values h3 {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 18px;
}

.values p {
    font-size: 18px;
    margin-bottom: 18px;
    line-height: 1.5;
}
</style>